import { useEffect } from "react";
import { history, useModel, Outlet, useLocation } from "umi";
import { useReactive } from "ahooks";
import { Row, Col } from "antd";
import { Card as SemiCard, List, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";

import useAllStaffs from "../hooks/staff/useAllStaffs";

// 正式员工
const RegularStaffPage = () => {
    const { windowInnerHeight } = useModel("global");
    const { routers } = useModel("routers");
    const { loading, staffs, loadAllStaffs } = useAllStaffs({ osType: "正式" });
    const location = useLocation();

    const state = useReactive({
        selectedStaff: {},
        selectMenuKey: null,
        staffUuid: null,
    });

    useEffect(() => {
        if (routers["regular"]?.subMenus) {
            let subMenus = routers["regular"].subMenus;
            let menus = [];
            Object.keys(subMenus).forEach((key) => {
                const { title, type } = subMenus[key];
                type === "menu" && menus.push({ key, title });
            });
            state.menus = menus;
            let selectMenu = menus.find((item) => item.key === state.selectMenuKey);
            !selectMenu && menus.length > 0 && (selectMenu = menus[0]);
            state.selectMenuKey = selectMenu.key;
        }
    }, [routers]);

    useEffect(() => {
        if (location.state?.osUuid) {
            state.staffUuid = location.state.osUuid;
        }
    }, [location.state?.osUuid]);

    useEffect(() => {
        if (state.selectMenuKey && state.selectedStaff?.osUuid) {
            history.replace("/regular/" + state.selectMenuKey, {
                oiUuid: state.selectedStaff.osUuid,
                staff: JSON.parse(JSON.stringify(state.selectedStaff)),
            });
        }
    }, [state.selectMenuKey, state.selectedStaff]);

    useEffect(() => {
        let selectedStaff = staffs.find((item) => item.osUuid === state.staffUuid);
        !selectedStaff && staffs.length > 0 && (selectedStaff = staffs[0]);
        state.selectedStaff = selectedStaff || {};
    }, [staffs, state.staffUuid]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 48;

    return (
        <Row gutter={10} style={{ padding: 10 }}>
            <Col span={4}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>员工列表</span>}
                    headerStyle={{ padding: "7px 12px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh />} onClick={loadAllStaffs}></Button>
                        </ButtonGroup>
                    }
                >
                    <List
                        loading={loading}
                        dataSource={staffs}
                        renderItem={(item) => (
                            <List.Item
                                className={state.selectedStaff?.osUuid === item?.osUuid ? "list-item-selected" : "list-item"}
                                onClick={() => (state.selectedStaff = item)}
                                main={item.osName}
                            />
                        )}
                    />
                </SemiCard>
            </Col>
            <Col span={20}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 15 }}>{state.selectedStaff?.osName} - 的员工信息</span>}
                    headerStyle={{ padding: "7px 12px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "hidden" }}
                    headerExtraContent={<ButtonGroup></ButtonGroup>}
                >
                    {state.selectedStaff.osUuid && (
                        <div style={{ display: "flex" }}>
                            <div style={{ padding: 1, width: 200, borderRight: "1px solid #eee", height: cardBodyHeight + 54, overflow: "auto" }}>
                                <List
                                    loading={state.loading}
                                    dataSource={state.menus}
                                    renderItem={(item, index) => {
                                        return (
                                            <List.Item
                                                className={`list-item ${state.selectMenuKey === item?.key ? "list-item-selected" : ""}`}
                                                main={<div>{item.title}</div>}
                                                onClick={() => (state.selectMenuKey = item.key)}
                                            />
                                        );
                                    }}
                                />
                            </div>
                            <div style={{ flex: 1, height: cardBodyHeight, overflow: "auto" }}>
                                <Outlet context={{ selectItem: state.selectItem, cardBodyHeight }} />
                            </div>
                        </div>
                    )}
                </SemiCard>
            </Col>
        </Row>
    );
};

export default RegularStaffPage;
